<template>
  <section id="ercodePage">
    <!--<el-row style="padding: 10px;">-->
      <!--<el-col :span="4">-->
        <!--<el-button type="primary" @click="goBack">返回</el-button>-->
      <!--</el-col>-->
      <!--<el-col :span="16"><h2></h2></el-col>-->
    <!--</el-row>-->
    <div class="flex">
      <span class="solid"></span>
      <span class="item2">用户查看二维码列表</span>
      <el-button type="primary" size="small" @click="goBack">返回</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80">
      </el-table-column>
      <el-table-column prop="name" label="商户名">
      </el-table-column>
      <el-table-column prop="account" label="账号">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <!--<el-table-column prop="createTime" label="时间" width="150">-->
      <!--</el-table-column>-->
      <el-table-column prop="backup4" label="状态">
      </el-table-column>
      <el-table-column label="操作">
        <template  slot-scope='scope'>
          <div style="white-space: nowrap">
            <el-button type="primary" size="small" @click="seeErCode(scope.row.id)">查看二维码</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" @close="handleClose" :visible.sync="dialogVisible" size="tiny">
      <img :src="erSrc" alt="">
      <div v-text="text"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button @click="refeshCode">刷新</el-button>

    <el-button type="primary" @click="makeCode">确 定</el-button>
  </span>
    </el-dialog>

    <!--<div class="block" style="text-align: right;padding: 10px 20px;">-->
    <!--<el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNumber"-->
    <!--:page-size="pageSize" layout="total, prev, pager, next" :total="total">-->
    <!--</el-pagination>-->
    <!--</div>-->
  </section>
</template>

<script>
  import dateformat from 'dateformat'

  export default {
    data () {
      return {
        tableData: [],
        total: 1,
        loading: false,
        dialogVisible: false,
        erSrc: undefined,
        pageSize: 10,
        pageNumber: 1,
        id: '',
        set: '',
        ercodeId: undefined,
        codeLoading: undefined,
        text: ''
      }
    },
    created() {
      this.getErCodeList()
      this.set = setInterval(() => {
        this.getErCodeList()
      }, 30000)
    },
    destroyed() {
      clearInterval(this.set)
    },
    methods: {
      getErCodeList() {
        this.loading = true;
        this.$api.getBusinessList(this.$route.query.id).then(res => {
          if (res.code == '000000') {
            this.loading = false;
            this.tableData = res.data.list;
            this.tableData.forEach(item => {
              if (item.createTime) {
                let date = new Date(item.createTime)
                item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM')
              }
              if (item.backup4 == '') {
                item.backup4 = '运行中'
              }
              if (item.backup4 == 9) {
                item.backup4 = '登录中'
              }
              if (item.backup4 == 2) {
                item.backup4 = '未登录'
              }
            })
          }
        })
      },
      handleCurrentChange(val) {
        this.pageNumber = val
        this.getErCodeList()
      },
      seeErCode(id) {
        this.dialogVisible = true
        this.erSrc = undefined
        this.ercodeId = id
        this.refeshCode()
//        this.$api.seeErCode(id).then(res => {
//          if (res.code == '000000') {
//            if (res.data === '') {
//              this.text = '二维码正在生成，点击刷新继续获取二维码'
//            } else {
//              this.text = ''
//              this.$message.success('获取二维码成功')
//              this.erSrc = res.data
//            }
//          }
//
//        })
      },
      refeshCode() {

        this.$api.refreshCode(this.ercodeId).then(res => {
          if (res.code === '000000') {
            this.codeLoading = this.$loading({
              target: '.el-dialog__body',
              fullscreen: false,
              text: '二维码正在生成中'
            })
            this.id = setInterval(() => {
              this.$api.seeErCode(this.ercodeId).then(res => {
                if (res.code === '000000') {
                  if (res.data === '') {

                  } else {
                    this.erSrc = res.data
                    this.codeLoading.close()
                    this.text = ''
                    clearInterval(this.id)
                  }
                }
              })
            }, 5000)
          } else {
            this.codeLoading.close()
          }
        })
      },
      makeCode() {
        this.$api.makeCode(this.ercodeId).then(res => {
          if (res.code == '000000') {
            this.dialogVisible = false
            this.$message.success('确定成功')
            this.getErCodeList()
          }
        })
      },
      handleClose() {
        clearInterval(this.id)
      },
      goBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less">
  #ercodePage {
    .flex {
      align-items: center;
      padding-bottom: 10px;
      /*border-bottom: 1px solid #ccc;*/
      .solid{
        width: 2px;
        height: 30px;
        background-color: green;
      }
      .item2{
        padding-left: 20px;
        font-weight: bold;
        padding-right: 20px;
      }
    }
    th {
      text-align: center;
    }

    .el-input__inner {
      height: 25px;
      font-size: 12px;
    }
    .el-input {
      width: 160px;
      display: inline-block;
      margin: 0 8px;
      margin: 0;
    }
    .title1 {
      font-size: 14px;
    }
  }
</style>
